import * as React from 'react';
import {ART, View, TouchableOpacity, Animated} from 'react-native';

const {Surface, Shape, Path, Group, Text} = ART;

class Circular extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const size = 30;
    const width = 2;
    const arcSweepAngle = 360;
    const percent = this.props.percent;
    const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2, 0, (arcSweepAngle * .9999) * percent);
    return (
      <Group x={0} y={0}>
        <Shape
          d={circlePath}
          stroke='#FF6026' strokeWidth={width}/>
        <Text
          x={15}
          y={8}
          fill={'#fff'}
          alignment="center"
          font={`10px "Helvetica Neue", "Helvetica", Arial`}
        >跳过</Text>
      </Group>
    );
  }

  circlePath = (cx, cy, r, startDegree, endDegree) => {
    const p = Path();
    p.path.push(0, cx + r, cy);
    p.path.push(4, cx, cy, r, startDegree * Math.PI / 180, endDegree * Math.PI / 180, 1);
    return p;
  }
}

const AnimatedGroup = Animated.createAnimatedComponent(Circular);


export default class CircularProgress extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentDidMount() {
    this.resetAnim(3);
  }


  render() {
    return (
      <View style={{flex: 1}}>
        <TouchableOpacity
          onPress={() => {
            console.log('点击了')
          }}
          style={{
            position: 'absolute',
            right: 10,
            top: 50,
          }}>
          <Surface width={100} height={100} style={{backgroundColor: 'red'}}>
            <AnimatedGroup percent={this.state.progress}/>
          </Surface>

        </TouchableOpacity>
      </View>
    )

  }

  resetAnim = (time) => {
    Animated.timing(
      this.state.progress,
      {
        toValue: 1,
        duration: time * 1000,
      },
    ).start(() => {
      console.log('结束动画')
    });
  }
}
